<template>
  <div class="a"> 
    <div class="header">
      <div class="headerInside" v-if="$route.path !== '/' && $route.path !== '/shop'">
        <div @click="back" class="jiantou">
          <i class="el-icon-arrow-left"></i>
        </div>
        {{ routes[0].meta.til }}
      </div>
      <div class="mainHeader" v-if="$route.path == '/'">
        <router-link to="/address">
          <div class="position">
            <i class="el-icon-location-information"></i>
            <span>{{province}}</span>
            <span>{{city}}</span>
          </div>
        </router-link>
        <router-link to="/shop">
          <Search />
        </router-link>
        <router-link to='/news'>
            <i class="el-icon-message iRight"></i>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import myBMap from './views/home/position.js'
import { routes } from "./router/index";
export default {
  data(){
    return{
        city:'',
        province:''
      }
  },
  computed: {
    routes() {
      if(this.$route.path.includes('/topic')){
        return routes.filter((item) => item.path.includes('/topic'));
      }else{
        return routes.filter((item) => item.path.includes(this.$route.path));
      }
    },
  },
  methods: {
    back(){
      this.$router.go(-1)
    },
    getCity(){
        myBMap.init().then(BMap=>{
          const geolocation = new BMap.Geolocation()
          geolocation.getCurrentPosition((position)=>{
            this.city = position.address.city;             //获取城市信息
            this.province = position.address.province;     //获取省份信息
          },(e)=>{
            console.log(e,'e')
            console.log('定位失败')
          }, {provider: 'baidu'})
        })
      },
  },
  mounted(){
    this.getCity()
    setTimeout(()=>{
      this.$store.commit('setCity',this.city)
      this.$store.commit('setProvince',this.province)
    },5000)
  },
};
</script>

<style scoped>
.back{
  font-weight: normal;
  font-size: 12px;
}
.mainHeader{
  display: flex;
  align-items: center;
}
.header {
  height: 8vh;
  border-bottom: 0.1vh solid #dddddd;
  /* background-image: linear-gradient(to bottom , #f3befa, #c2e4ff); */
}
.headerInside{
  position: relative;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 8vh;
  color: #666666;
}
.jiantou{
  position: absolute;
  left: 5vw;
  top: 0;
}
.position{
  min-width: 28vw;
  color: #666666;
  display: flex;
  line-height: 8vh;
  align-items: center;
  font-size: 14px;
}
.position i{
  font-size: 18px;
  color: #409EFF;
}
.iRight{
  color: #409EFF;
  font-size: 22px;
  margin-left: 8vw;
}
.tou{
    position: relative;
}
</style>